<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <title>QQ风格后台管理系统</title>
    <link rel="stylesheet" href="css/backpage.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<body>
    <div class="sidebar">
        <div class="logo">
            <img src="qq-icon.png" alt="QQ">
            <span>后台管理</span>
        </div>
        <div class="menu">
            <div class="menu-item active" onclick="showContent('user')">
                <i class="fas fa-users"></i>
                <span>用户管理</span>
            </div>
            <div class="menu-item" onclick="showContent('dynamic')">
                <i class="fas fa-newspaper"></i>
                <span>动态管理</span>
            </div>
            <div class="menu-item" onclick="showContent('wallet')">
                <i class="fas fa-wallet"></i>
                <span>钱包管理</span>
            </div>
        </div>
    </div>
    <div class="main-content">
        <!-- 管理员信息头部 -->
        <div class="admin-header">
            <div class="admin-info">
                <div class="admin-avatar" style="margin:auto;">
                	<img src="${loginUser.avatar}" id ="userHeadimg">
                </div>
                <div class="admin-name">管理员</div>
                <div class="admin-status"></div>
            </div>
            <div style="flex: 1;"></div>
            <div>
                <button class="btn btn-primary" onclick="showAddForm()">
                    <i class="fas fa-plus"></i> 新增
                </button>
            </div>
        </div>
        
        <div class="content-header">
            <span id="header-title">用户管理</span>
        </div>
        
        <div class="content">
            <!-- 用户管理内容 -->
            <div id="user-content">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">用户列表</div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>昵称</th>
                                <th>余额</th>
                                <th>头像</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        	<c:forEach items="${users }" var="user" varStatus="status">
                        		<tr>
	                                <td>${status.count}</td>
	                                <td>${user.nickName}</td>
	                                <td>${user.money}</td>
	                                <td>
	                                	<img src="${user.avatar}" class="avatar-preview" style="width: 50px; height: 50px; border-radius: 50%;">
	                                	<input type="text" style="display: none" value="${user.account}" id="useraccount">
	                                </td>
	                                <td>
	                                    <button class="btn btn-primary btn-sm" onclick="showEditUserForm('${user.nickName}','${user.money}','${user.avatar}',this)">
	                                        <i class="fas fa-edit"></i> 编辑
	                                    </button>
	                                    <button class="btn btn-danger btn-sm" onclick="deleteUser(${user.account},this)">
	                                        <i class="fas fa-trash"></i> 删除
	                                    </button>
	                                </td>
                            	</tr>
                        	</c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 动态管理内容 -->
            <div id="dynamic-content" style="display: none;">
            	
                <div class="card">
                    <div class="dynamic-header">
                        <div class="avatar">M</div>
                        <div class="user-info">
                            <div class="username">max</div>
                            <div class="post-time">2025-06-17 14:30 · 在线</div>
                        </div>
                        <div>
                            <button class="btn" onclick="showEditDynamicForm(1)"><i class="fas fa-edit"></i></button>
                            <button class="btn btn-danger" onclick="deleteDynamic(1)"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                    <div class="dynamic-content">
                        今天天气真好，出去走走拍了几张照片，分享给大家！
                    </div>
                    <div class="dynamic-images">
                        <div class="image-item">
                            <img src="https://picsum.photos/300/300?random=1" alt="动态图片">
                            <div class="image-actions">
                                <div class="image-btn" onclick="deleteImage(1,1)" title="删除图片"><i class="fas fa-trash"></i></div>
                                <div class="image-btn" onclick="viewImage(1,1)" title="查看大图"><i class="fas fa-expand"></i></div>
                            </div>
                        </div>
                        <div class="image-item">
                            <img src="https://picsum.photos/300/300?random=2" alt="动态图片">
                            <div class="image-actions">
                                <div class="image-btn" onclick="deleteImage(1,2)" title="删除图片"><i class="fas fa-trash"></i></div>
                                <div class="image-btn" onclick="viewImage(1,2)" title="查看大图"><i class="fas fa-expand"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="dynamic-header">
                        <div class="avatar">贝</div>
                        <div class="user-info">
                            <div class="username">贝利亚</div>
                            <div class="post-time">2025-06-16 18:20 · 在线</div>
                        </div>
                        <div>
                            <button class="btn" onclick="showEditDynamicForm(2)"><i class="fas fa-edit"></i></button>
                            <button class="btn btn-danger" onclick="deleteDynamic(2)"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                    <div class="dynamic-content">
                        分享一首好听的音乐给大家，希望你们喜欢！
                    </div>
                </div>
            </div>
            
            <!-- 钱包管理内容 (极简版) -->
            <div id="wallet-content" style="display: none;">
                <div class="wallet-card">
                    <div class="wallet-balance">¥ 12,568.00</div>
                    <div class="wallet-actions">
                        <div class="btn-circle" onclick="showEditWalletForm()" title="修改余额">
                            <i class="fas fa-edit"></i>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">最近交易</div>
                    </div>
                    <div style="padding: 15px;">
                        <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color);">
                            <div>
                                <div style="font-weight: bold;">账户充值</div>
                                <div style="font-size: 12px; color: var(--text-light);">2025-06-16 14:30</div>
                            </div>
                            <div style="color: var(--success-color); font-weight: bold;">+¥1,000.00</div>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 10px 0;">
                            <div>
                                <div style="font-weight: bold;">商城购物</div>
                                <div style="font-size: 12px; color: var(--text-light);">2025-06-15 10:20</div>
                            </div>
                            <div style="color: var(--danger-color); font-weight: bold;">-¥568.00</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 用户编辑表单 -->
    <div class="form-container" id="user-form">
        <div class="form-content">
            <div class="form-header">
                <div class="form-title">编辑用户</div>
                <div class="close-btn" onclick="hideForm('user-form')">&times;</div>
            </div>
            <form enctype="multipart/form-data" id="userUpdataForm"  action="updateUser.do" method="POST">
                <div class="form-group">
                    <label class="form-label">昵称</label>
                    <input type="text" class="form-control" id="userNick"placeholder="请输入昵称">
                </div>
                <div class="form-group">
                    <label class="form-label">余额</label>
                    <input type="text" class="form-control" id="userMoney" placeholder="请输入用户余额">
                </div>
                <div class="form-group">
                    <label class="form-label">头像</label>
                    <input type="file" id="avatar-file" class="avatar-file-input" accept="image/*" name="headImg">
                    <img src="" id="headimg">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="hideForm('user-form')">取消</button>
                    <button type="submit" class="btn btn-primary" id="userUpdate">保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 动态编辑表单 -->
    <div class="form-container" id="dynamic-form">
        <div class="form-content">
            <div class="form-header">
                <div class="form-title">编辑动态</div>
                <div class="close-btn" onclick="hideForm('dynamic-form')">&times;</div>
            </div>
            <form>
                <div class="form-group">
                    <label class="form-label">内容</label>
                    <textarea class="form-control" rows="4" placeholder="请输入动态内容"></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">上传图片</label>
                    <input type="file" multiple>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="hideForm('dynamic-form')">取消</button>
                    <button type="submit" class="btn btn-primary" >保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 钱包编辑表单 -->
    <div class="form-container" id="wallet-form">
        <div class="form-content">
            <div class="form-header">
                <div class="form-title">修改余额</div>
                <div class="close-btn" onclick="hideForm('wallet-form')">&times;</div>
            </div>
            <form>
                <div class="form-group">
                    <label class="form-label">新余额</label>
                    <input type="text" class="form-control" placeholder="请输入新的余额">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="hideForm('wallet-form')">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 切换内容显示
        function showContent(type) {
            document.getElementById('user-content').style.display = 'none';
            document.getElementById('dynamic-content').style.display = 'none';
            document.getElementById('wallet-content').style.display = 'none';
            
            document.getElementById(type + '-content').style.display = 'block';
            document.getElementById('header-title').textContent = type === 'user' ? '用户管理' : 
                                                              type === 'dynamic' ? '动态管理' : '钱包管理';
            
            // 更新菜单项激活状态
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.classList.remove('active');
                if (item.getAttribute('onclick').includes(type)) {
                    item.classList.add('active');
                }
            });
        }
        
        // 显示/隐藏表单
        function showForm(formId) {
            document.getElementById(formId).style.display = 'flex';
        }
        
        function hideForm(formId) {
            document.getElementById(formId).style.display = 'none';
        }
        
        // 用户管理相关函数
        function showEditUserForm(nick,money,avatar,event) {
            // 这里可以加载用户数据到表单
            console.log('编辑用户:', event);
            $("#userMoney").val(money);
            $("#userNick").val(nick);
            $("#headimg").attr('src',avatar);
            showForm('user-form');
        }
        //点击保存修改用户状态
        $("#btn btn-primary").click(function(event){
        	event.preventDefault();
        	let file = this.files[0];
        	let reader = new FileReader();
        	reader.onload = function(e){
        		$("#headimg").attr("src",e.target.result);
        	

        	}
        	let formData = new FormData();
        	formData.append("headimg",file);
        	console.log($("#userMoney").val());
        	formData.append("userMoney",$("#userMoney").val());
        	formData.append("userNick",$("#userNick").val());
        	formData.append("account",$("#useraccount").val());
        	$.ajax({
        		url:"updateUser.do",
        		type:"POST",
        		data:formData,
        		contentType: false,
        		processData: false,
        		success: function(data){
        			console.log(data);
        		}
        	})
        	reader.readAsDataURL(file);
        })
        function deleteUser(useraccount,dom) {
        	$.ajax({
        		url:"deleteUserByAcoount.do",
        		type:"POST",
        		data:{
        			useraccount:useraccount,
        		},
        		success: function(data){
        			console.log(data);
        		}
        	})
        }
        
        function showAddForm() {
            const currentContent = document.querySelector('.content > div[style="display: block;"]').id;
            if (currentContent === 'user-content') {
                showForm('user-form');
            } else if (currentContent === 'dynamic-content') {
                showForm('dynamic-form');
            } else if (currentContent === 'wallet-content') {
                showForm('wallet-form');
            }
        }
        
        // 动态管理相关函数
        function showEditDynamicForm(dynamicId) {
            // 这里可以加载动态数据到表单
            console.log('编辑动态:', dynamicId);
            showForm('dynamic-form');
        }
        
        function deleteDynamic(dynamicId) {
            if (confirm('确定要删除这条动态吗？')) {
                alert('动态删除成功: ' + dynamicId);
            }
        }
        
        function deleteImage(dynamicId, imageId) {
            if (confirm('确定要删除这张图片吗？')) {
                alert('删除图片: 动态' + dynamicId + '的图片' + imageId);
            }
        }
        
        function viewImage(dynamicId, imageId) {
            alert('查看大图: 动态' + dynamicId + '的图片' + imageId);
        }
        
        // 钱包管理相关函数
        function showEditWalletForm() {
            showForm('wallet-form');
        }
        
        // 初始化显示用户管理
        showContent('user');
    </script>
</body>
</html>